<template>
  <div class="reports hd bgwhite">
       <div class="yygh_search">
          <ul class="fl">
            <li>
              <router-link to="/report" class="hover">检验报告</router-link>
            </li>
            <!-- <li>
              <router-link to="/report?sort=2" class="">检查报告</router-link>
            </li> -->
          </ul>
          <div class="fr">
            <!-- <select-role @btnclick="selectFamilyHandle" className="family-name"></select-role> -->
          </div>
        </div>

        <position>
          <router-link to="/report">报告查询</router-link>
          &gt;
          <span class="last">检验报告</span>
        </position>
        <div class="report-list-wrapper" v-if="lists.length > 0">
          <ul class="report-list">
            <li v-for="list in lists" :key="list.odsId" @click="goDetail(list)">
              <a href="javascript:;">
              {{list.itemName}}  <span class="date">{{list.reportDt.substr(0, 10)}}</span>
              </a>
            </li>
          </ul>
        </div>

        <div class="no-data bg-white" v-else>
          暂无数据
        </div>
  </div>
</template>

<script>
import Position from '../../components/Position'
import {commonAjax, PLATFORM_PREFIX} from '../../api/api'
// import SelectRole from '../../components/SelectRole'
export default {
  data () {
    return {
      lists: [],
      reportSource: '',
      keyWords: '',
      person: JSON.parse(localStorage.person || '{}')
    }
  },
  mounted () {
    if (!localStorage.accessToken) {
      this.$message({message: '请先登录', type: 'error'})
      return
    }
    if (!localStorage.person) {
      this.$message({message: '请先完善信息', type: 'error'})
      setTimeout(() => this.$router.push('/personal?from=login'), 400)
      return
    }
    this.getReportList(this.person.mpiId)
  },
  methods: {
    goDetail (list) {
      localStorage.__reportId = list.odsId
      if (list.reportType === '1') {
        this.getExamReport(list.odsId)
      } else {
        this.$router.push('/report/detail')
      }
    },
    getExamReport (odsId) {
      commonAjax([odsId], `${PLATFORM_PREFIX}.reportService`, 'getExamReport').then(res => {
        if (res.data.code === 200) {
          window.location.href = res.data.body.url
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
      })
    },
    selectFamilyHandle (f) {
      this.getReportList(f.mpiId)
    },
    getReportList (mpiId) {
      if (!mpiId) {
        return
      }
      this.$store.commit('UPDATE_LOADING')
      commonAjax([{
        mpiId: mpiId,
        pageNo: 1,
        reportSource: this.reportSource,
        keyWords: this.keyWords
      }], `${PLATFORM_PREFIX}.reportService`, 'queryList').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200) {
          this.lists = res.data.body || []
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
      }).catch(res => {
        this.$store.commit('UPDATE_LOADING')
        localStorage.removeItem('accessToken')
        location.reload()
      })
    }
  },
  components: {
    Position
  }
}
</script>

<style lang="less">
@import '../../common/css/vars.less';

.report-list-wrapper {
  padding:0 20px 20px;
  background: #fff;
}
.report-list {
  overflow: hidden;
  margin: auto;
  border: 1px solid #F9E8E5;
  li {
    overflow: hidden;
    line-height: 40px;
    a {
      color: #333;
      display: block;
      padding:0 20px;
      border-bottom: 1px solid #F9E8E5;
      &:hover {
        color: @color-primary;
        background-color: #FFF2EC;
      }
      .date {
        float: right;
      }
    }
    
  }
}
.family-name {
  padding-right: 20px;
  a{color: #FCF4EC;}
}
</style>
